<template>
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="0"
      :immediate-check="false"
    >
      <li v-for="item in dataList" :key="item.filmId" @click="goToDetail(item.filmId)">
        <div class="left">
          <img :src="item.poster" />
        </div>
        <div class="center">
        <div>
        <span class="name">{{item.name}}</span>
        <span class="item">{{item.item.name}}</span>
        </div>
        <div>
        <span class="label">观众评分</span>
        <span class="grade">{{item.grade | gradeFilter}}</span>
        </div>
        <div class="mainactor">
        <span>主演：{{ item.actors | actorfilter }}</span>
        </div>
        <div>
            <span class="address">{{ item.nation }} | {{ item.runtime }}分钟</span>
          </div>
        </div>
        <div class="right" >
          购票
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
import http from "../request/http";
export default {
  name: "NowPlaying",
  data() {
    return {
      // 电影列表数据
      dataList: [],
      // 是否正在加载中
      loading: false,
      // 是否加载完成
      finished: false,
      // 记录第几页数据
      current: 1,
      // 总电影数据的个数
      total: 0
    };
  },
  methods: {
    onLoad() {
      if (this.dataList.length == this.total) {
        this.finished = true;
        return;
      }
      this.current++;
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3819095`,
        headers: {
          "X-Host": "mall.film-ticket.film.list"
        }
      }).then(res => {
        if (res.status == 0) {
          console.log(res.data);
          this.dataList = [...this.dataList, ...res.data.films];
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    goToDetail(myid){
      this.$router.push('/detail/' + myid)
    }
  },
  mounted() {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=3819095`,
      headers: {
        "X-Host": "mall.film-ticket.film.list"
      }
    }).then(res => {
      if (res.status == 0) {
        console.log(res.data);
        let { films } = res.data;
        this.dataList = films;
      }
    });
  },
  filters: {
    actorfilter(actors) {
      if (actors === undefined) return "暂无主演";
      return actors.map(item => item.name).join(" ");
    },
    gradeFilter(grade){
      if(grade){
        return ' '+grade
      }else{
        return '暂无'
      }
    }
  }
};
</script>

<style scoped>
.box {
  background: #fff;
}
.van-list {
  margin-left: 0.15rem;
}
.van-list li {
  display: flex;
  padding: 20px 20px 15px 15px;
  height: 94px;
  position: relative;
  border-bottom: 1px solid #ededed;
}
.left {
  width: 66px;
  height: 94px;
  display: block;
}
.left img {
  width: 100%;
  height: 100%;
  display: block;
}
.center {
  width: calc(100%-116px);
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right {
  top: 34px;
  line-height: 25px;
  height: 25px;
  width: 50px;
  color: #ff5f16;
  font-size: 13px;
  text-align: center;
  border-radius: 2px;
  position: relative;
}
.right::after {
  content: " ";
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #ffb232;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}
.item {
  font-size: 0.09rem;
  color: #fff;
  background-color: #d2d6dc;
  height: 0.14rem;
  line-height: 0.14rem;
  padding: 0 0.02rem;
  border-radius: 2px;
  vertical-align: middle;
}
.name {
  max-width: calc(100% - 0.25rem);
  color: #191a1b;
  font-size: 0.16rem;
  height: 0.22rem;
  line-height: 0.22rem;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.mainactor {
  font-size: 0.13rem;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address {
  font-size: 0.13rem;
  color: #797d82;
}
.center div {
  margin-top: 6px;
}
</style>
